<template>
    <div class="login_wapper">
        <div class="login">
            <h4>电商后台管理系统</h4>
            <div class="height-20"></div>
            <div class="height-20"></div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="ruleForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="ruleForm.password"></el-input>
                </el-form-item>
            </el-form>
            <div class="height-20"></div>
            <div class="height-20"></div>
            <div class="login_footer">
                <el-button @click="onresetForm">重置</el-button>
                <el-button type="primary" @click="onsubmit">登录</el-button>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  created() {
  },
  mounted() {},
  data() {
    return {
      ruleForm: {
        username: "admin",
        password: "123456"
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 18, message: "长度在 6 到 18个字符", trigger: "blur" }
        ]
      }
    };
  },
  // 方法
  methods: {
    onresetForm() {
      this.$refs.ruleForm.resetFields();
    },
    onsubmit(){
         this.$refs.ruleForm.validate((valid) => {
          if (!valid) return
           this.$http.login(this.ruleForm).then(res=>{
               if(res.meta.status==200){
                   sessionStorage.setItem("user",JSON.stringify(res.data))
                   sessionStorage.setItem("token",res.data.token)
                   this.$message.success(res.meta.msg);
                  this.$router.push('/users')
               }else{
                     this.$message.error(res.meta.msg);
               }
           }).catch(res=>{
               console.log(res);
               
                this.$message.error("网络错误");
           })

    })
    }
  },
  //计算属性
  computed: {},
  // 监听属性
  watch: {},
  // 组件注册
  components: {},
  // 组件销毁之前
  beforeDestroy() {}
}
</script>
<style lang="less" scoped>
.login_wapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  background: url("https://desk-fd.zol-img.com.cn/t_s1920x1200c5/g2/M00/06/03/ChMlWl47euiIMcvqAAqCVAf-qzEAANOXwIAt0gACoJs648.jpg")
    no-repeat center center;
  .login {
    height: 330px;
    width: 500px;
    padding: 20px;
    border-radius: 30px;
    background: #f8f8f9;
    text-align: center;
  }
  .login_footer {
    display: flex;
    justify-content: flex-end;
  }
}
</style>